<template>
  <div>
    <veLines
      v-if="originData.length > 0"
      ref="ageAnalysis"
      :data="chartData"
      :height="'400px'"
      :judge-width="true"
      :settings="chartSettings"
      :extend="extendData"
      resizeable
    />
    <div v-else :style="{top: emptyTop+'px'}" class="empty-container">
      <img :src="emptyImg" alt="">
      <div class="empty-text">暂无数据</div>
    </div>
  </div>
</template>

<script>
import { isNumber } from '@/utils/tools';
import emptyImg from '@/assets/empty-table-data.png';
import { format } from '@/filters/date';
import { moneyFilter, numberTextFormat } from '@/filters/number';
import veLines from 'v-charts/lib/line.common';
import 'echarts/lib/component/legendScroll.js';
export default {
  filters: { format, moneyFilter },
  components: { veLines },
  props: {
    activeRange: {
      type: Number,
      default: 0
    },
    emptyTop: {
      type: Number,
      default: 0
    },
    originData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    type: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      emptyImg,
      chartData: null,
      chartSettings: {
        labelMap: {
          sendNum: '发送量',
          downloadNum: '下载量',
          dateTime: '时间'
        }
        // yAxisType: ['KM']
      },
      extendData: {
        legend: {
          type: 'scroll',
          show: true,
          itemHeight: 8
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: (params) => {
              if (!isNumber(params)) {
                return params || '';
              } else {
                return moneyFilter(numberTextFormat(params, 1), false);
              }
            }
          },
          axisPointer: {
            snap: true
          }
        },
        series: {
          type: 'line'
        },
        color: ['#406EFF', '#FD8546', '#F9C142', '#7254F6', '#FF6573', '#31CC9C']
      }
    };
  },
  created() {
    this.handelData();
  },
  methods: {
    handelData(nameShow = '') {
      const chartType = this.type;
      this.originData.forEach(i => {
        if (i.dateTime && typeof i.dateTime === 'number') {
          i.dateTime = format(i.dateTime, 'YYYY/MM/DD');
        }
      });

      if (chartType === 1) {
        const columns = ['dateTime', 'sendNum', 'downloadNum'];
        const rows = this.originData;
        this.chartData = {
          columns,
          rows
        };
      } else {
        const columns = ['dateTime'];
        const rows = [];
        const date = [];
        const selected = {};
        this.originData.forEach((i, index) => {
          if (!columns.includes(i.name)) {
            columns.push(i.name);
            selected[i.name] = false;
            if ((!nameShow || nameShow === '') && index === 0) {
              selected[i.name] = true;
            }
          }
          if (!date.includes(i.dateTime)) {
            date.push(i.dateTime);
          }
        });
        if (nameShow && nameShow !== '') selected[nameShow] = true;
        date.forEach(i => {
          const obj = {
            dateTime: i
          };
          this.originData.forEach(j => {
            if (j.dateTime === i) {
              obj[j.name] = j.sendNum;
            }
          });
          rows.push(obj);
        });
        this.extendData.legend.selected = selected;
        this.chartData = {
          columns,
          rows
        };
      }
    },
    getData(day) {
      this.$emit('getSendNum', { timeRange: day });
    }
  }
};
</script>

<style lang="scss" scoped>
.empty-container {
  text-align: center;
  position: relative;
  img {
    width: 120px;
  }
  .empty-text {
    color: #666;
    font-size: 14px;
  }
}
</style>
